<template>
  <div class="upload-container">
    <h1>上传闲置商品</h1>
    <form @submit.prevent="submitForm">
      <!-- 标题 -->
      <div class="form-group">
        <label for="title">标题：</label>
        <input
            type="text"
            id="title"
            v-model="form.title"
            placeholder="请输入商品标题"
            required
        />
      </div>

      <!-- 描述 -->
      <div class="form-group">
        <label for="description">描述：</label>
        <textarea
            id="description"
            v-model="form.description"
            placeholder="请输入商品描述"
            required
        ></textarea>
      </div>

      <!-- 类型、租金、租赁天数 -->
      <div class="form-row">
        <div class="form-group">
          <label for="type">类型：</label>
          <select id="type" v-model="form.type" required>
            <option value="" disabled>请选择类型</option>
            <option value="1">出租</option>
            <option value="2">出售</option>
          </select>
        </div>
        <div class="form-group">
          <label for="price">{{ priceLabel }}：</label>
          <input
              type="number"
              id="price"
              v-model="form.price"
              :placeholder="pricePlaceholder"
              required
          />
        </div>
        <div class="form-group" v-if="form.type === '1'">
          <label for="rentDay">租赁天数：</label>
          <input
              type="number"
              id="rentDay"
              v-model="form.rentDay"
              placeholder="请输入租赁天数"
              :min="7"
              required
          />
        </div>
      </div>

      <!-- 上传图片 -->
      <div class="form-group">
        <label>上传图片：</label>
        <div class="image-upload-container">
          <UploadImage
              v-for="(image, index) in form.images"
              :key="index"
              :prop-image-url="image.url"
              @imageChange="(url) => handleImageChange(index, url)"
          />
        </div>
        <p class="upload-tips">
          图片大小不超过2M、仅能上传PNG/JPEG/JPG类型图片！
        </p>
      </div>

      <!-- 提交按钮 -->
      <div class="form-group">
        <button type="submit">提交</button>
      </div>

      <!-- 返回按钮 -->
      <div class="form-group">
        <button type="button" class="return-button" @click="goToIndex">返回</button>
      </div>
    </form>
  </div>
</template>

<script>
import { reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import UploadImage from '@/components/UploadImage.vue';
import axios from "axios";


export default {
  components: {
    UploadImage
  },
  setup() {
    let form = reactive({
      title: '',
      description: '',
      type: '', // 1: 出租, 2: 出售
      price: null,
      rentDay: null,
      images: [
        { url: '' }, // 第一张图片
        { url: '' }, // 第二张图片
        { url: '' }, // 第三张图片
        { url: '' }  // 第四张图片
      ]
    });

    const router = useRouter();

    // 计算属性
    const priceLabel = computed(() => form.type === '1' ? '租金/天' : '价格');
    const pricePlaceholder = computed(() =>
        form.type === '1' ? '请输入租金（每天）' : '请输入商品价格'
    );

    // 图片上传处理
    const handleImageChange = (index, url) => {
      form.images[index].url = url; // 修复：更新对应索引的图片
    };

    // 表单提交
    const submitForm = () => {
      // 验证逻辑
      if (form.type === '1' && form.rentDay < 7) {
        alert('租赁天数不能小于 7 天！');
        return;
      }

      // 构造提交数据
      const formData = {
        ...form,
        type: parseInt(form.type), // 将字符串转换为整数
        price: parseFloat(form.price),
        rentDay: form.type === '1' ? parseInt(form.rentDay) : null,
        images: form.images.map(image => image.url).filter(url => url) // 过滤空值
      };


      const token = sessionStorage.getItem("token"); // 从 sessionStorage 中获取 JWT
      console.log("token:"+token);
      axios.post('http://localhost:9090/good/add', formData, {
        headers: {
          "Authorization": `Bearer ${token}`, // 将 JWT 放在请求头中
          "Content-Type": "application/json" // 设置内容类型
        }
      })
          .then(response => {
            console.log('提交数据：', formData);
            console.log('返回数据: ', response);
            // 检查返回的 code 是否为 200
            if (response.data.code === 200) {
              console.log('提交成功，响应数据：', response.data);
              alert('商品添加成功！');
              form = {
                type: '',
                price: '',
                rentDay: '',
                images: []
              };
              router.push('/index');
            } else {
              // 如果 code 不是 200，提示错误信息
              console.error('提交失败，错误信息：', response.data.msg);
              alert(`提交失败：${response.msg}`);
            }
          })
          .catch(error => {
            // 捕获异常并输出错误信息
            if (error.response) {
              // 服务器返回了错误状态码（如 400, 500 等）
              console.error('错误状态码：', error.response.status);
              console.error('错误信息：', error.response.data);
              alert(`提交失败：${error.response.data.msg || '未知错误'}`);
            } else if (error.request) {
              // 请求已发送，但未收到响应（如网络问题）
              console.error('未收到响应：', error.request);
              alert('提交失败：网络异常，请稍后重试！');
            } else {
              // 其他错误（如请求配置问题）
              console.error('请求配置错误：', error.message);
              alert('提交失败：请求配置错误！');
            }
          });
    };

    // 返回主页
    const goToIndex = () => {
      router.push('/index'); // 直接跳转到个人中心路由
    };

    return {
      form,
      priceLabel,
      pricePlaceholder,
      handleImageChange,
      submitForm,
      goToIndex
    };
  }
};
</script>

<style scoped>
.upload-container {
  max-width: 900px;
  margin: 20px auto 40px; /* 调整上边距为 20px，下边距保持 40px */
  padding: 20px 30px; /* 调整内边距 */
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 20px; /* 减少标题下边距 */
  font-size: 28px;
  color: #333;
}

.form-group {
  margin-bottom: 20px; /* 减少表单项下边距 */
}

/* 其他样式保持不变 */

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

input, textarea, select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  background-color: #fafafa;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

textarea {
  resize: none; /* 禁止拖动 */
}

input:focus, textarea:focus, select:focus {
  border-color: #42b983;
  box-shadow: 0 0 8px rgba(66, 185, 131, 0.3);
  outline: none;
}

button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #42b983, #3aa876);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.3s ease, transform 0.2s ease;
}

button:hover {
  background: linear-gradient(135deg, #3aa876, #42b983);
  transform: translateY(-2px);
}

.return-button {
  background: linear-gradient(135deg, #f56c6c, #e65a5a);
}

.return-button:hover {
  background: linear-gradient(135deg, #e65a5a, #f56c6c);
}

.upload-tips {
  font-size: 12px;
  color: #777;
  margin: 10px 0 0 0;
  line-height: 1.6;
}

/* 图片上传容器样式 */
.image-upload-container {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* 单个图片上传组件样式 */
.image-upload-container > * {
  flex: 1 1 calc(25% - 15px);
  min-width: 180px;
  max-width: 100%;
}

/* 调整上传框样式（深度穿透） */
.image-upload-container :deep(.avatar-uploader) {
  width: 100%;
  height: 180px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  background-color: #fafafa;
  transition: border-color 0.3s, background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.image-upload-container :deep(.avatar-uploader:hover) {
  border-color: #42b983;
  background-color: #f0f9f5;
}

.image-upload-container :deep(.el-upload) {
  width: 100%;
  height: 100%;
}

.image-upload-container :deep(.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
}

.image-upload-container :deep(.avatar) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* 类型、租金、租赁天数同一排 */
.form-row {
  display: flex;
  gap: 20px; /* 调整间距 */
  margin-bottom: 25px;
}

.form-row .form-group {
  flex: 1; /* 均分宽度 */
  margin-bottom: 0;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .upload-container {
    padding: 20px;
  }

  .form-row {
    flex-direction: column; /* 小屏幕下垂直排列 */
    gap: 15px;
  }

  .image-upload-container > * {
    flex: 1 1 calc(50% - 15px);
  }

  h1 {
    font-size: 24px;
  }
}
</style>